<template>
  <div class="wrap">
    <div class="main">
      <el-card class="el-card">
          <h3>方案发布</h3>
          <el-divider></el-divider>
        <el-form :model="ValidateForm" ref="ValidateForm" label-width="100px" class="ruleForm">
          <!--案例标题-->
          <el-form-item
            label="案例标题1"
            prop="title"
            :rules="[
                    { required: true, message: '案例标题不能为空'}
                  ]"
          >
            <el-input type="text" v-model="ValidateForm.title" autocomplete="off"></el-input>
          </el-form-item>
          <!--联系电话-->
          <el-form-item
            label="联系电话"
            prop="contact"
            :rules="[
                    { required: true, message: '联系电话不能为空'}
                  ]"
          >
            <el-input type="text" v-model="ValidateForm.contact" autocomplete="off"></el-input>
          </el-form-item>
          <!--上传图片-->
          <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="4">
              <label class="labe_class"><span style="color:red; ">* </span>上传图片</label>
            </el-col>
            <el-col :span="8">
              <el-upload
                class="avatar-uploader"
                auto-upload="false"
                v-model="ValidateForm.photo"
                prop="photo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row>
          <!--案例简介-->
          <el-form-item
                  class="summary_class"
                  label="案例简介"
                  prop="summary"
                  :rules="[
                              { required: true, message: '案例简介不能为空'}
          ]"
          >
            <el-input type="textarea" v-model="ValidateForm.summary" autocomplete="off"></el-input>
          </el-form-item>
          <!--案例详情-->
          <el-form-item
                  class="detail_class"
                  label="案例详情"
                  prop="detail"
                  :rules="[
                              { required: true, message: '案例详情不能为空'}
          ]"
          >
            <el-input type="textarea" v-model="ValidateForm.detail" autocomplete="off"></el-input>
          </el-form-item>
          <!--按钮-->
          <el-form-item align="right">
            <el-button type="primary" @click="submitForm('ValidateForm')">发布</el-button>
            <el-button @click="resetForm('ValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
    export default {
        data: function () {
            return {
                imageUrl: '',
                ValidateForm: {
                    title: '',
                    contact: '',
                    summary: '',
                    detail: '',
                    photo: '',
                    dialogImageUrl: ''
                }
            };
        },
        methods: {
            submitForm (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!')
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            resetForm (formName) {
                this.$refs[formName].resetFields()
            },
            handleDownload (file) {
                console.log(file)
            },
            // 上传图片函数
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped lang="less">
  .labe_class {
    font-size: 14px;
    color: #606266;
    padding-left: 16px;
  }

  /*.class_foot_gird{*/
    /*height: 80px;*/
  /*}*/
  .wrap{
    .main{
        display: flex;
        justify-content: center;
        align-items: center;
        /*width: 960px;*/
        margin: 0 auto;
        background-color: #F7F7F7;
        .class_header_gird{
            height: 80px;
        }
        .el-card{
            width: 750px;
            margin: 50px 0;
            box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
        }
    }
  }
  .summary_class{
    padding-top: 20px;
  }

  .avatar-uploader{
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
